<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :switchFullscreen="true"
    cancelText="关闭"
    @ok="handleOk"
    @cancel="close"
  >

    <div class="table-page-search-wrapper" style="margin-top: 0">
      <a-form-model layout="inline" :model="queryParam">
        <a-row :gutter="10">
          <a-col :md="6" :sm="12">
            <a-form-model-item label="歌曲名称" prop="songName" style="margin-left:8px">
              <a-input placeholder="请输入歌曲名称查询" v-model="queryParam.songName"></a-input>
              <!--              <j-input placeholder="输入名称模糊查询" v-model="queryParam.listname"></j-input>-->
            </a-form-model-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 18px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>
    <select-song-model ref="addSongModal" @ok="searchReset"></select-song-model>
    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button type="primary" icon="plus" @click="handleAddSongs">添加存在歌曲</a-button>
      <a-button icon="delete" @click="deleteBatchRelation">删除</a-button>
    </div>
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{x:1000}"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
      >
        <!-- 字符串超长截取省略号显示-->
        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
          </div>
        </template>
        <span slot="action" slot-scope="text, record">
           <a  @click="handleDelete(record.id)">移除关系</a>
        </span>
      </a-table>
    </div>

  </j-modal>
</template>

<script>
  import SelectSongModel from './SelectSongModel'
  import {getAction, postAction, deleteAction} from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import {putAction,getFileAccessHttpUrl} from '@/api/manage';
  export default {
    name: 'DetailSongsModel',
    mixins: [JeecgListMixin],
    components: {JInput,SelectSongModel},
    data() {
      return {
        title: "",
        width:1200,
        visible: false,
        superQueryFieldList: [
          { type: 'input', value: 'songName', text: '歌手姓名', },
        ],
        toplistId: "",
        url: {
          list: '/mus/toplist/songs',
          delete: "/mus/toplist/deteleRelation",
          deleteBatch: "/mus/toplist/deleteBatchRelation",
        },
        columns: [
          {
            title: '封面',
            align: "center",
            width: 100,
            dataIndex: 'avatar',
            scopedSlots: {customRender: "avatarslot"}
          },
          {
            title: '歌曲名称',
            align: "left",
            dataIndex: 'songName',
            width: 100,
            sorter: true,
            ellipsis: true,
          },
          {
            title: '歌手',
            align: "center",
            width: 100,
            dataIndex: 'artistId_dictText',
            sorter: true,
            ellipsis: true,
          },
          {
            title: '简介',
            align: "center",
            width: 180,
            dataIndex: 'description',
            ellipsis: true,
          },
          {
            title: '出品方',
            align: "center",
            width: 100,
            dataIndex: 'publisher',
            ellipsis: true,
          },
          {
            title: '流派',
            align: "center",
            width: 100,
            dataIndex: 'genreId_dictText',
            ellipsis: true,
          },
          {
            title: '语种',
            align: "center",
            width: 100,
            dataIndex: 'languageId_dictText',
            ellipsis: true,
          },
          {
            title: '出品日期',
            align: "center",
            width: 100,
            dataIndex: 'publishDate'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 120,
            fixed: 'right'
          }

        ],
      }
    },
    methods: {
      getAvatarView: function(avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      handleAddSongs(){
        this.$nextTick(() => {
          this.$refs.addSongModal.loadData(this.toplistId);
        });
      },
      loadData(id,name) {
        this.title = name;
        this.toplistId = id;
        console.log(name)
        this.visible = true;
        getAction(this.url.list, {
          toplistId: id,
          ...this.getQueryParams()
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },
      /** 完成选择 */
      handleOk() {
        this.close()
      },
      /** 关闭弹窗 */
      close() {
        this.visible = false;
      },
      searchQuery() {
        this.loadData(this.toplistId, this.title)
      },
      searchReset() {
        this.queryParam = {}
        this.loadData(this.toplistId, this.title)
      },

      handleTableChange(pagination, filters, sorter) {
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field
          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
        }
        this.ipagination = pagination
        this.loadData(null, this.value)
      },
      handleDelete: function (id) {
        if (!this.url.delete) {
          this.$message.error("请设置url.delete属性!")
          return
        }
        if (!this.toplistId) {
          this.$message.error("专辑或榜单ID为空!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {toplistId: this.toplistId, songId: id}).then((res) => {
          if (res.success) {
            that.$message.success("删除歌曲与选中榜单专辑关系成功！");
            if (this.selectedRowKeys.length>0){
              for(let i =0; i<this.selectedRowKeys.length;i++){
                if (this.selectedRowKeys[i] == id){
                  this.selectedRowKeys.splice(i,1);
                  break;
                }
              }
            }
            that.loadData(this.toplistId, this.title);
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      deleteBatchRelation: function() {
        if (!this.url.deleteBatch) {
          this.$message.error("请设置url.deleteBatch!")
          return
        }
        if (!this.toplistId) {
          this.$message.error("专辑或榜单ID为空!")
          return
        }
        const that = this;
        this.selectKeys = this.selectedRowKeys;
        var ids = "";
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
        deleteAction(that.url.deleteBatch, {toplistId: this.toplistId, songIds: ids}).then((res) => {
          if (res.success) {
            that.$message.success("删除歌曲与选中榜单专辑关系成功！");
            that.loadData(this.toplistId, this.title);
          } else {
            that.$message.warning(res.message);
          }
        });
      }
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less'
</style>